/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { string } from 'prop-types';
import { Icon, Layout, Menu, Modal } from 'antd';
import { Link } from 'react-router';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const confirm = Modal.confirm;

export default class extends Component {

  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }

  static get propTypes() {
    return {
      openKeys: string,
      selectedKeys: string,
    };
  };

  static defaultProps = {
    openKeys: 'home',
    selectKes: 'carousel'
  };

  componentDidMount() {
    document.title = '中正投资后台管理系统';
  }

  /**
   * 退出登录
   */
  logout() {
    confirm({
      title: '',
      content: '确认退出登录吗？',
      onOk() {
        localStorage.clear();
        location.replace('#/login?type=0');
      },
      onCancel() {
      },
    });
  }

  render() {
    const { openKeys, selectedKeys, children } = this.props;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Header className="header" style={{ padding: '0 30px', display: 'flex' }}>
          <Link
            to={'/admin'}
            style={{ color: '#fff', fontSize: '25px', fontWeight: 900, cursor: 'pointer' }}
          >中正投资后台管理系统</Link>
          <div style={{ flex: 1 }}></div>
          <div style={{ color: '#fff' }}>
            管理员，
            <a href="javascript:" onClick={this.logout} style={{ color: '#fff', margin: '0 0 0 10px' }}>退出</a>
          </div>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={[selectedKeys]}
              defaultOpenKeys={[openKeys]}
              style={{ height: '100%', borderRight: 0 }}
            >
              <SubMenu key="home" title={<span><Icon type="desktop" />首页管理</span>}>
                <Menu.Item key="carousel">
                  <Link to="/admin/carousel">轮播图</Link>
                </Menu.Item>
                <Menu.Item key="hot">
                  <Link to="/admin/hot">热点栏目</Link>
                </Menu.Item>
                <Menu.Item key="protocol">
                  <Link to="/admin/protocol">使用协议</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="category" title={<span><Icon type="bars" />栏目管理</span>}>
                <Menu.Item key="all">
                  <Link to="/admin/category">所有栏目</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="article" title={<span><Icon type="database" />文章管理</span>}>
                <Menu.Item key="all">
                  <Link to="/admin/article">所有文章</Link>
                </Menu.Item>
                <Menu.Item key="edit">
                  <Link to="/admin/article/edit">新增文章</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="member" title={<span><Icon type="team" />用户管理</span>}>
                <Menu.Item key="all">
                  <Link to="/admin/member">所有用户</Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
              {children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}
